  <div class="my-3 card" data-gj-poll-replace id="jobs-table">
    <div class="list-group list-group-flush text-nowrap table-jobs" role="table">
      <header class="list-group-item bg-body-tertiary">
        <div class="row small text-muted text-uppercase align-items-center">
        <div class="col-4"><%= t("good_job.models.batch.jobs") %></div>
          <div class="d-none d-lg-block col-lg-1 text-lg-center"><%= t "good_job.models.job.queue" %></div>
          <div class="d-none d-lg-block col-lg-1 text-lg-end"><%= t "good_job.models.job.priority" %></div>
          <div class="d-none d-lg-block col-lg-1 text-lg-end"><%= t "good_job.models.job.labels" %></div>
          <div class="d-none d-lg-block col-lg-1 text-lg-end"><%= t "good_job.models.job.attempts" %></div>
          <div class="col text-end">
            <%= tag.button type: "button", class: "btn btn-sm text-muted", role: "button",
                           data: { bs_toggle: "collapse", bs_target: ".job-params" },
                           aria: { expanded: false, controls: jobs.map { |job| "##{dom_id(job, 'params')}" }.join(" ") } do %>
              <%= render_icon "info" %>
              <span class="visually-hidden">Inspect</span>
            <% end %>
          </div>
        </div>
      </header>

      <% if jobs.present? %>
        <% jobs.each do |job| %>
          <div role="row" class="list-group-item list-group-item-action py-3">
            <div class="row align-items-center">
              <div class="col-lg-4">
                <%= tag.code link_to(job.id, job_path(job), class: "small text-muted text-decoration-none") %>
                <%= tag.h5 tag.code(link_to(job.display_name, job_path(job), class: "text-reset text-decoration-none")), class: "text-reset mb-0" %>
              </div>
              <div class="col-4 col-lg-1 text-lg-center">
                <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.job.queue" %></div>
                <span class="badge text-bg-primary font-monospace"><%= job.queue_name %></span>
              </div>
              <div class="col-4 col-lg-1 text-lg-end">
                <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.job.priority" %></div>
                <span class="font-monospace fw-bold"><%= job.priority %></span>
              </div>
              <div class="col-4 col-lg-1 text-lg-end">
                <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.job.labels" %></div>
                <% job.labels&.each do |label| %>
                  <span class="badge rounded-pill text-bg-secondary font-monospace"><%= label %></span>
                <% end %>
              </div>
              <div class="col-4 col-lg-1 text-lg-end">
                <div class="d-lg-none small text-muted mt-1"><%= t "good_job.models.job.attempts" %></div>
                <% if job.error %>
                  <%= tag.span job.executions_count, class: "badge rounded-pill text-bg-danger",
                    data: {
                      bs_toggle: "popover",
                      bs_trigger: "hover focus click",
                      bs_placement: "bottom",
                      bs_content: job.display_error,
                    }
                  %>
                <% else %>
                  <% executions_badge_color = job.executions_count > 1 ? "text-bg-warning" : "text-bg-secondary" %>
                  <span class="badge rounded-pill <%= executions_badge_color %>"><%= job.executions_count %></span>
                <% end %>
              </div>
              <div class="mt-3 mt-lg-0 col d-flex gap-3 align-items-center justify-content-end">
                <%= tag.span relative_time(job.last_status_at), class: "small" %>
                <%= status_badge job.status %>

                <div class="dropdown float-end">
                  <button class="d-flex align-items-center btn btn-sm" type="button" id="<%= dom_id(job, :actions) %>" data-bs-toggle="dropdown" aria-expanded="false">
                    <%= render_icon :dots %>
                    <span class="visually-hidden"><%= t ".actions.title" %></span>
                  </button>
                  <ul class="dropdown-menu shadow" aria-labelledby="<%= dom_id(job, :actions) %>">
                    <li>
                      <% job_reschedulable = job.status.in? [:scheduled, :retried, :queued] %>
                      <%= link_to reschedule_job_path(job.id), method: :put, class: "dropdown-item #{'disabled' unless job_reschedulable}", title: t(".actions.reschedule"), data: { confirm: t(".actions.confirm_reschedule"), disable: true } do %>
                        <%= render_icon "skip_forward" %>
                        <%= t "good_job.actions.reschedule" %>
                      <% end %>
                    </li>
                    <li>
                      <% job_discardable = job.status.in? [:scheduled, :retried, :queued] %>
                      <%= link_to discard_job_path(job.id), method: :put, class: "dropdown-item #{'disabled' unless job_discardable}", title: t(".actions.discard"), data: { confirm: t(".actions.confirm_discard"), disable: true } do %>
                        <%= render_icon "stop" %>
                        <%= t "good_job.actions.discard" %>
                      <% end %>
                    </li>
                    <li>
                      <%= link_to retry_job_path(job.id), method: :put, class: "dropdown-item #{'disabled' unless job.status == :discarded}", title: t(".actions.retry"), data: { confirm: t(".actions.confirm_retry"), disable: true } do %>
                        <%= render_icon "arrow_clockwise" %>
                        <%= t "good_job.actions.retry" %>
                      <% end %>
                    </li>
                    <li>
                      <%= link_to job_path(job.id), method: :delete, class: "dropdown-item #{'disabled' unless job.finished?}", title: t(".actions.destroy"), data: { confirm: t(".actions.confirm_destroy"), disable: true } do %>
                        <%= render_icon "trash" %>
                        <%= t "good_job.actions.destroy" %>
                      <% end %>
                    </li>

                    <li>
                      <%= link_to "##{dom_id(job, 'params')}",
                                  class: "dropdown-item",
                                  data: { bs_toggle: "collapse" },
                                  aria: { expanded: false, controls: dom_id(job, "params") } do %>
                        <%= render_icon "info" %>
                        <%= t "good_job.actions.inspect" %>
                      <% end %>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <%= tag.div id: dom_id(job, "params"), class: "job-params list-group-item collapse small bg-dark text-light" do %>
            <%= tag.pre JSON.pretty_generate(job.display_serialized_params) %>
          <% end %>
        <% end %>
      <% else %>
        <div class="list-group-item py-4 text-center text-muted">
          <%= t ".no_jobs_found" %>
        </div>
      <% end %>
    </div>
  </div>
